<!-- 时段锁定号源信息 -->
<template>
  <div>
    <el-dialog
      title="时段锁定号源信息"
      :visible.sync="dialogVisible"
      :destroy-on-close="true"
      :before-close="handleClose"
      width="1000px"
      class="dialog"
    >
      <div class="basic-info">
        <div>
          <span class="light">当前时段信息：</span>
          <span> {{time}}</span>
        </div>
        <div>
          <span class="title">号源总数：</span>
          <span class="blue">{{sData.totalNum}}</span>
        </div>
      </div>
      <el-card shadow="hover" class="ky-card-xs ky-card-hdbg">
        <div class="check-rule-list">
          <div class="fs-16 mb-10">预约规则</div>
          <el-table
            :data="ruledmbList"
            class="ky-table"
            ref="table"
            highlight-current-row
            @row-click="rowClick"
            :show-header="false"
          >
            <el-table-column
              label="规则名称"
              align="center"
              prop="ruleName"
            ></el-table-column>
          </el-table>
        </div>
        <!--  <div>
              <div v-for="(item,index) in ruledmbList" :key="index" @click="rowClick(item)">{{item.ruleName}}</div>
          </div> -->
        <div class="check-rule-box">
          <div class="num-block">
            <div class="bdr">
              <span>可使用号源数：</span>
              <span>{{canUseNum}}</span>
            </div>
            <div class="bdr">
              <span>锁定号源数：</span>
              <span>{{reservedNum}}</span>
            </div>
            <div>
              <span>剩余号源数：</span>
              <span>{{canUseNum - reservedNum}}</span>
            </div>
          </div>
          <div>
            <div class="rule_box_title">
              <div class="tit">
                <span>检查规则:</span>
              </div>
              <div class="rule_styles">
                <div
                  class="rule_style_item"
                  v-for="item in ruleConditionGroupOptions"
                  :key="item.value"
                >
                  <i :class="'rs_icon rs_icon' + item.value"></i
                  >{{item.label.replace("预约", "")}}
                </div>
              </div>
            </div>
            <ruleItem
              class="rule-item"
              :hospital-code="sData.hospitalCode"
              :rcg-options="ruleConditionGroupOptions"
              :rc-options="ruleConditionOptions"
              :rule-list="ruleContents"
              :disabled="true"
              v-show="ruledmbList && ruledmbList.length>0"
            ></ruleItem>
          </div>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
    <sourceInfoDialog
      :visible.sync="sourceListVisible"
      :hospital-code="sData.hospitalCode"
      :rule-info-id="ruleInfoId"
    ></sourceInfoDialog>
  </div>
</template>

<script>
import { appointmentruledmbGetlist } from '@/api/api.js'
import sourceInfoDialog from '@/views/appointMaintain/rulesSetting/sourceInfoDialog.vue'
import ruleItem from '@/views/appointMaintain/rulesSetting/comp/ruleItem.vue'
import { getAppointmentRuleContentList, getItemDicList } from '@/api/api.js'
import { Options } from '@/utils/constant'
export default {
  name: '',
  mixins: [],
  components: { sourceInfoDialog, ruleItem },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    sData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      sourceListVisible: false,
      ruledmbList: [],
      ruleData: {},
      ruleInfoId: '',
      ruleConditionGroupOptions: [],
      ruleConditionOptions: [],
      ruleContents: [],
      options: Options,
      canUseNum: 0,
      reservedNum: 0,
      time: ''
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
      if (val) {
        this.getItemList().then((res) => {
          this.getDetail()
          this.dealTime()
        })
      } else {
        // 关闭
        this.clearData()
      }
    }
  },
  computed: {},
  created() {
    console.log('created=>锁定号源')
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    getDetail() {
      appointmentruledmbGetlist({
        hospitalCode: this.sData.hospitalCode,
        listDmbId: this.sData.id
      }).then((res) => {
        if (res && res.code === 10000) {
          this.ruledmbList = res.content.list
          if (this.ruledmbList && this.ruledmbList.length > 0) {
            this.$refs.table.setCurrentRow(this.ruledmbList[0])
            this.rowClick(this.ruledmbList[0])
          }
        }
      })
    },
    dealTime() {
      // 处理时间
      this.time =
        this.sData.appointmentDate.substring(0, 11) +
        this.sData.beginTime +
        ' ~ ' +
        this.sData.endTime
    },
    frmTime(row, column, cellValue, index) {
      return row.appointmentDate.substring(0, 10)
    },
    sourceOpen(row) {
      this.sourceListVisible = true
      this.ruleInfoId = row.ruleInfoId
    },
    rowClick(row, column, event) {
      this.reservedNum = row.reservedNum
      getAppointmentRuleContentList({
        hospitalCode: row.hospitalCode,
        ruleInfoId: row.ruleInfoId
      }).then((res) => {
        if (!res) return
        this.ruleContents = res.content.list
        for (let i = 0; i < this.ruleContents.length; i++) {
          // 锁定数计算
          if (this.ruleContents[i].ruleCondition === '号源数') {
            this.canUseNum = this.ruleContents[i].conditionValue
          } else if (this.ruleContents[i].ruleCondition === '百分比') {
            this.canUseNum =
              Math.floor(Number(this.ruleContents[i].conditionValue) *
              0.01 *
              this.sData.totalNum)
          }

          // 获取content对应的控件和控件里应有分字段值
          let obj = this.ruleConditionOptions.find((item) => {
            return (
              item.dicEname === this.ruleContents[i].ruleCondition &&
              item.controllType === this.ruleContents[i].controllType
            )
          })
          this.ruleContents[i].ruleConditionId = obj.id
        }
      })
    },
    // 计算检查规则选项、检查规则提示说明
    setRuleConditionGroup() {
      const gOptions = []
      const ruleExplainRule = []
      this.options.modelTypeOptions.forEach((item) => {
        if (item.value !== 2) {
          gOptions.push({
            ...item,
            options: []
          })
        }
      })
      // 选项分组
      this.ruleConditionOptions.forEach((item) => {
        const idx = gOptions.findIndex((opt) => opt.value === item.modelType)
        if (idx >= 0) {
          gOptions[idx].options.push(item)
        }
      })

      // 过滤掉没有选项的项
      gOptions.forEach((item, index) => {
        if (item.options.length === 0) {
          gOptions.splice(index, 1)
        } else {
          ruleExplainRule.push(item.label.replace('预约', ''))
        }
      })
      this.ruleConditionGroupOptions = gOptions
    },
    getItemList() {
      return new Promise((rs, rj) => {
        this.ruleConditionOptions = []
        getItemDicList({ hospitalCode: this.sData.hospitalCode })
          .then((res) => {
            if (res && res.code === 10000) {
              this.ruleConditionOptions = res.content.list
              this.setRuleConditionGroup()
              this.$forceUpdate()
              rs()
            } else {
              rj()
            }
          })
          .catch((error) => {
            rj(error)
          })
      })
    },
    clearData() {
      this.ruleContents = []
      this.ruledmbList = []
      this.reservedNum = 0
      this.canUseNum = 0
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.dialog {
  .el-dialog__body {
    padding-top: 10px;
  }
}
.basic-info {
  padding: 20px;
  border: 1px solid #efeff5;
  background-image: linear-gradient(to right, #edf5ff, #fff);
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .light {
    color: #838383;
  }
  .blue {
    color: #3e83ef;
  }
}
.fs-16{
    font-size:16px
}
.mb-10{
    margin-bottom: 10px;
}
.rule-item{
    margin-right: -15px;
}
.total-num {
  background: #e1e1e1;
  height: 50px;
  line-height: 30px;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  margin: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.aiw-main {
  width: 260px;
  height: 80px;
  background: #00c0ef;
  margin: auto;
  padding: 10px;
  margin-bottom: 15px;
  position: relative;
  .title {
    font-size: 22px;
    color: #fff;
    margin-bottom: 10px;
  }
  .num {
    color: #fff;
    font-size: 22px;
  }
  .icon {
    position: absolute;
    top: 4px;
    right: 18px;
    font-size: 66px;
    color: rgba(0, 0, 0, 0.15);
  }
}
.el-dialog__body {
  padding: 20px 20px;
}
.el-form {
  width: 100%;
  display: flex;
  justify-content: space-around;
  height: 45px;
}
.check-rule-list {
  flex: 1;
  padding: 10px;
}
.check-rule-box {
  width: 650px;
  margin-left: 10px;
  border-left: 1px solid #eee;
  padding: 10px;
  .num-info {
    text-align: center;
    width: 100%;
    padding: 5px;
    background: #bf5f0e;
    color: #fff;
  }
  .num-block {
    display: flex;
    border: 1px solid #eee;
    padding: 10px;
    div {
      flex: 1;
      padding: 5px;
      text-align: center;
    }
    .bdr {
      border-right: 1px solid #eee;
    }
  }
}
.ky-card-xs {
  /deep/ .el-card__body {
    display: flex;
  }
}
.ky-table {
  max-height: 450px;
  overflow: auto;
}
.rule_box_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0x;
  line-height: 40px;
  .tit {
    font-weight: bold;
    font-size: 12px;
  }
  .rule_styles {
    display: flex;
    font-size: 12px;
    color: #666;
    align-items: center;
    justify-content: space-between;
    .rule_style_item {
      margin-left: 10px;
    }
  }
}
</style>
